// FlatList - 高性能列表组件
// FlatList 是一个高性能的列表组件，适用于长列表数据的展示。
// data属性 - 用于指定数据源 ，renderItem：从data中获取一个项目并将其渲染到列表中。
/* 
  ● 跨平台支持
  ● 支持水平布局
  ● 支持头部和尾部组件
  ● 支持下拉刷新
  ● 支持上拉加载
  ● 支持多列布局
  ● 支持列表项分隔线
*/

import {
  FlatList,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
const list = [
  {
    id: 1,
    title: '马云1',
  },
  {
    id: 2,
    title: '马化腾2',
  },
  {
    id: 3,
    title: '刘强东3',
  },
  {
    id: 4,
    title: '马云4',
  },
  {
    id: 5,
    title: '马化腾5',
  },
  {
    id: 6,
    title: '刘强东6',
  },
  {
    id: 7,
    title: '马云7',
  },
  {
    id: 8,
    title: '马化腾8',
  },
  {
    id: 9,
    title: '刘强东9',
  },
];
interface ItemProps {
  id: number;
  title: string;
}

const Item = ({ title, id }: ItemProps) => (
  <View style={styles.itemList}>
    <Text key={id} style={styles.title}>
      {title}
    </Text>
  </View>
);

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      {/* data指定数据源 */}
      {/* 把data源中的每一项数据映射成列表项 */}
      {/* initialNumToRender指定初始值渲染数据的数量，一般数量要填满一个屏幕 */}
      {/* keyExtractor属性指定列表项的key */}
      {/* initialScrollIndex属性指定初始滚动位置 */}
      <FlatList
        data={list}
        renderItem={({ item }) => <Item id={item.id} title={item.title}></Item>}
        keyExtractor={(item) => item.id.toString()}
        initialNumToRender={7}
        initialScrollIndex={2}
      ></FlatList>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  itemList: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginBottom: 10,
  },
  title: {
    fontSize: 30,
  },
});
